<template>
  <div class="login-page">
    <xj-dialog :title="isLoginPage?'登录':'注册'" :visible="true"
               width="400px">
      <el-form v-show="isLoginPage" :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.dlbm"
                    autocomplete="off"
                    @keypress.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.kl"
                    autocomplete="off"
                    show-password type="password" @keypress.enter.native="login">
            <div slot="append">
              <el-link @click="handleWjklBtnClick">忘记密码</el-link>
            </div>
          </el-input>
        </el-form-item>
        <el-form-item>
          <span style="vertical-align: middle">
            测试请使用
            <el-link type="primary" @click="inputTest">测试账户</el-link>
            登录
          </span>
        </el-form-item>
      </el-form>
      <el-form v-show="!isLoginPage" :model="registForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="registForm.dlbm"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="registForm.mc"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registForm.kl" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="registForm.rpkl" show-password type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div v-show="isLoginPage">
          <el-link style="margin-right: 20px" type="primary" @click="isLoginPage=false">没有账户，立即注册</el-link>
          <el-button type="primary" @click="login()">登录</el-button>
        </div>
        <div v-show="!isLoginPage">
          <el-link style="margin-right: 20px" type="primary" @click="isLoginPage=true">已有账户，立即登录</el-link>
          <el-button type="primary" @click="regist()">注册</el-button>
        </div>
      </div>
    </xj-dialog>
  </div>
</template>

<script>
import XjDialog from "@/components/XjDialog";

export default {
  components: {XjDialog},
  name: "Login",
  data() {
    return {
      isLoginPage: true,
      registForm: {
        dlbm: '',
        mc: '',
        kl: '',
        rpkl: '',
      },
      loginForm: {
        dlbm: '',
        kl: '',
      }
    }
  },
  methods: {
    handleWjklBtnClick() {
      this.$confirm("请联系系统管理员")
    },
    inputTest() {
      this.loginForm.dlbm = 'test'
      this.loginForm.kl = 'test'
    },
    async login() {
      try {
        let res = await this.$api.dl({
          dlbm: this.loginForm.dlbm,
          kl: this.loginForm.kl
        })
        mySessionStorage.setItem("yhxx", res.yhxx)
        // this.$store.commit("setYhxx", res.yhxx)
        // let afterLogin = mySessionStorage.getItem("afterLogin")
        // if (afterLogin) {
        //   mySessionStorage.removeItem("afterLogin")
        //   this.$router.replace(afterLogin)
        // } else {
        this.$router.replace("/")
        // }
      } catch (e) {
        this.$message({
          message: e.message,
          type: "error"
        })
      }
    },
    async regist() {
      try {
        if (this.registForm.kl !== this.registForm.rpkl) {
          throw new Error("两次密码不相同")
        }
        let res = await this.$api.addYh({
          dlbm: this.registForm.dlbm,
          mc: this.registForm.mc,
          kl: this.registForm.kl
        })
        this.loginForm = {dlbm: this.registForm.dlbm, kl: ''}
        this.registForm = {dlbm: '', kl: '', mc: '', rpkl: ''}
        this.isLoginPage = true
      } catch (e) {
        this.$message({message: e.message, type: 'error'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  .login-box {
    width: 300px;
  }
}
</style>
